<template>
	<view class="content">
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<!-- 如果当前页已经加载过数据或者当前切换到的tab是当前页，才展示当前页数据（懒加载） -->
		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" :hide-empty-view="true" v-model="dataList"
			@query="queryList" :fixed="false">
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<view class="item-box">
					
				</view>
			</view>
		</z-paging>
	</view>
</template>
<!-- 诊断 -->
<script setup>
	import {
		ref,
		watch,
		nextTick,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import dayjs from 'dayjs';
	import {
		getTag
	} from '@/utils/Tools.js'
	const {
		proxy
	} = getCurrentInstance(); //获取上下文实例，ctx=vue2的this,=>proxy.tui
	const paging = ref(null)
	// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
	const dataList = ref([])
	// 当前组件是否已经加载过了
	const firstLoaded = ref(false)
	// 是否滚动到当前页
	const isCurrentPage = ref(false)
	const dataArr = ref([])
	const props = defineProps({
		brId: {
			type: String,
			default: function() {
				return ''
			}
		},
		jzId: {
			type: String,
			default: function() {
				return ''
			}
		},
		// 当前组件的index，也就是当前组件是swiper中的第几个
		tabIndex: {
			type: Number,
			default: function() {
				return 0
			}
		},
		// 当前swiper切换到第几个index
		currentIndex: {
			type: Number,
			default: function() {
				return 0
			}
		}
	})
	watch(() => props.currentIndex, (newValue, oldValue) => {
		if (newValue == props.tabIndex) {
			// 懒加载，当滑动到当前的item时，才去加载
			if (!firstLoaded.value) {
				// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
				nextTick(() => {
					setTimeout(() => {
						isCurrentPage.value = true;
					}, 100);
				})
			}

		}
	}, {
		immediate: true
	})

	const queryList = (pageNo, pageSize) => {
		// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
		// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
		// 模拟请求服务器获取分页数据，请替换成自己的网络请求
		const params = {
			pageNo: pageNo,
			pageSize: pageSize,
			jzId: props.jzId,
			brId: props.brId,
			zdlx:'1'
		}
		proxy.http.get('/ylgl/mzgl-zdjl/page', {
			brief: true,
			data: params
		}).then(res => {
			console.log(res);
			paging.value.complete(res.list);
			firstLoaded.value = true
		}).catch(e => {
			paging.value.complete(false);
			console.log(e)
		})
	}

</script>

<style scoped lang="scss">
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.content {
		height: 100%;

		.item {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;

			.item-box {
				width: 100%;
				height: 100%;
				background-color: white;
				border-radius: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;

			}
		}
	}
</style>